<template>
    <div class="headlines">
        <div class="title">
            <h2>头条精选</h2>
            <div class="much"><a href="#">更多</a> &nbsp;<span class="el-icon-caret-right"></span></div>
        </div>
        <ul class="headlines-list">
            <li v-for="(item,index) in 5" :key="index">
                <div>
                    <a href="#"> <img
                            src="https://online-course.nos-eastchina1.126.net/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB_%E6%8B%B7%E8%B4%9D-1250274708364984320.jpg"
                            alt=""></a>
                </div>
                <p> 小米集团-科大16级韩同学成长经历分享 </p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "cousrHeadlines"
    }
</script>

<style scoped>
    .title {
        position: relative;
        margin: auto;
        width: 1125px;
        padding: 0 12px 10px 62px!important;
        border-bottom: 2px solid #e8e8e8;
    }
    .much {
        position: absolute;
        top: 5px;
        right: 10px;
        color: #999;
    }
    .much>a {
        color: #999;
    }
    h2 {
        text-align: center;
    }
    .headlines {
        width: 1200px;
        margin: 30px auto!important;
    }
    .headlines-list {
        overflow: hidden;
    }
    .headlines-list>li {
        float: left;
        padding: 8px!important;

    }
    .headlines-list>li div {
        overflow: hidden;
        width: 224px;
        height: 135px;
    }
    .headlines-list>li div>a>img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: 1s;
    }
    .headlines-list>li div>a>img:hover {
        transform: scale(1.2,1.2);
    }

    .headlines-list>li>p:nth-of-type(1) {
        width: 200px;
        padding-top: 10px!important;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .headlines-list>li:hover {
        cursor: pointer;
    }
    .headlines-list>li:hover>p:nth-of-type(1) {
        color: #00cf8c;

    }
</style>